<template>
	<view id="near">
		<u-scroll-list indicatorColor="#b8dad5" indicatorActiveColor="#2CB9A4" indicatorBarWidth="15" :indicator="true">
			<view class="scroll-list" style="flex-direction: row;">
				<view class="scroll-list__goods-item" v-for="(item,index) in tabList" :key="item.id"
					@click="clickTab(item,index)">
					<view :class="[index ===selectBtn ?'item_btn':'item_btn1']">{{ item.name }}
					</view>
				</view>
			</view>
		</u-scroll-list>
		<view class="tips" v-if="showTips">
			<text @click="goNotice" style="flex: 1;">团洗洗车常见问题问答</text>
			<view class="closeTips" @click.stop="closeNotice">
				<u-icon name="close-circle" color="#fff" style=""></u-icon>
			</view>
		</view>
		<scroll-view>
			<view class="equity" v-if="showSelect" @click="getInterest">
				<view class="equity_free">
					<view class="equity_switch">
						<u-switch v-model="equity" active-color="#2CB9A4" size="14" @change="equityChange"></u-switch>
					</view>
					<view class="item">
						会员权益商户
					</view>
					<u-icon size="18" name="question" color="#ff6666" @click.stop="showMsg(1)"></u-icon>
				</view>
				<view class="equity_commercial">
					<view class="equity_switch">
						<u-switch v-model="usable" active-color="#2CB9A4" size="14" @change="usableChange"></u-switch>
					</view>
					<view class="item">
						可用权益商户
					</view>
					<u-icon size="18" name="question" color="#ff6666" @click.stop="showMsg(2)"></u-icon>
				</view>
			</view>
		</scroll-view>
		<view class="iconNow">
			<view class="top" @click="toLocation">
				<image src="../../static/icon/nearCar/localNow.png" mode=""></image>
			</view>
			<view class="bot" @click="goSweep">
				<image src="../../static/icon/nearCar/scan.png" mode=""></image>
			</view>
		</view>
		<view class="map_container">
			<map id="myMap" class="map" style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude"
				:markers="shownearShop?markers:[]" :scale="scale"
				show-location @callouttap="makertap" @poitap="poitap" @touchend="regionchange">
				<cover-view slot="callout">
					<cover-view :marker-id="i.id" v-for="(i,index) in vicinityData" :key="index" class="customCallout">
						<cover-view class="singleItem content" v-if="i.goods.length==0">
							<!-- {{i.showVicItem}} -->
						</cover-view>
						<cover-view class="singleItem content" v-if="i.goods.length==1">
							{{i.showVicItem}}
						</cover-view>
						<cover-view class="vicinityInfo content" v-if="i.goods.length>1">
							<cover-view class="item" v-for="(item,index1) in i.showVicItem" :key="index1"
								:style="{background:colorList[index1]?colorList[index1]:colorList[1]}">
								{{item}}
							</cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
			</map>
		</view>
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
		<shopCarShow :showPop="showBottom" @refuse="refuse" @submit="useCard" :title='bottomTip' ref="shopCarShow"
			:listData="listData" @upDateCheck="upDateCheck" @upDateList="getMoreList" :cardId="merchanData.id"
			:isTrila="isTrila">
		</shopCarShow>
		<nearShop :showPop="shownearShop" @refuse="refuse" ref="nearShop" :listData="nearShopList" @upDateList="loadMore"
			@clearType="clearType">
		</nearShop>
		<qulityCarShow :showPop="showQulityCar" @refuse="refuse" @submit="useCard" :title='bottomTip' ref="shopCarShow"
			:listData="listData" @upDateCheck="upDateCheck" @upDateList="getMoreList" :cardId="merchanData.id">
		</qulityCarShow>
		<nearCarShow :showPop="showNearCar" @refuse="refuse" @submit="subNearCar" :title='title' :showqx="false"
			:nearCarData="nearCarData" @getMerchant="getMerchant" style="height:100vh;">
		</nearCarShow>
	</view>
</template>

<script>
	import {
		vicinity,
		cardType,
		merchantSee,
		usableCoupons,
		nearby
	} from '@/request/api.js'
	import amapFile from "@/libs/amap-wx.130.js";
	import nearCarShow from "@/components/common/nearCarShow.vue"
	import nearShop from "@/components/index/nearShop.vue"
	import shopCarShow from "@/components/index/shopCarShow.vue"
	import qulityCarShow from "@/components/index/qulityCarShow.vue"
	var self, mapCtx
	export default {
		components: {
			nearCarShow,
			nearShop,
			shopCarShow,
			qulityCarShow
		},
		data() {
			return {
				isTrila: 0, //默认不是飞狗，1是飞狗
				showQulityCar: false,
				showTips: true,
				showSelect: false,
				selectBtn: '',
				shownearShop: true,
				listData: [],
				scale: 12,
				showBottom: false,
				bottomTip: '请选择你的卡券',
				nearCarData: null,
				str: '人全人全人全', //仅仅是为了调样式
				showNearCar: false,
				equity: false,
				usable: false,
				title: '汇融广场洗车点',
				key: '0a7e3109fe2a9b39a5e2b854e164614f',
				latitude: '',
				longitude: '',
				firstlat: '',
				firstlng: '',
				local: '',
				distance: '',
				// 标记点
				markers: [],
				circles: [],
				radius: 0,
				amapObject: null,
				tips: [],
				last_page: 1, // 最后一页
				form: {
					city: '成都市',
					card_type_id: '',
					usable: 0,
					equity: 0,
				},
				show: false,
				colorList: ['#1F63E1', '#09BB07', '#FF954E', '#7C7EE3', '#979797', '#086a97', '#41971d', '#979209',
					'#134c97', '#69972d', '#0b9774', '#099782'
				],
				customCalloutData: [], //当多个商品的时候要显示的数据
				tabList: [],
				labels: [],
				vicinityData: [],
				nearData: [], //处理过的数据
				merchanData: {
					id: '',
					lon: '',
					lat: ''
				},
				interType: false,
				centerData: null,
				nearShopList: [],
				nearPage: 1, // 最后一页
				nearParams: {
					lon: '',
					lat: '',
					page: 1,
					card_type_id: '',
					usable: 0,
					equity: 0,
				},
				clickShopPop: false, //是否是点击详情
			}
		},
		computed: {

		},
		onShow() {
			this.usable = false
			this.showNearCar = false
			this.selectBtn = ''
			this.form.usable = this.usable ? 1 : 0
			this.nearParams.card_type_id = ''
			this.nearParams.usable = 0
			this.nearParams.equity = 0
			self = this
			let city = uni.getStorageSync('city') || '成都市'
			this.form.city = city;
			mapCtx = wx.createMapContext('myMap')
			this.getCardType()
			// var amaFile = require('../../libs/amap-wx.130.js')
			//2XXBZ-D63C4-FDHU6-XQACW-H56O6-DRBDC
			this.amapObject = new amapFile.AMapWX({
				key: '0a7e3109fe2a9b39a5e2b854e164614f'
			})
			this.showTips = true;
			uni.$u.sleep(1500).then(() => {
				this.showSelect = true
			})
		},
		onHide() {
			this.form.card_type_id = ''
		},
		methods: {
			getInterest(){
				this.interType = true
				console.log(this.interType,'this.interType')
			},
			showMsg(e) {
				this.interType = true;
				uni.navigateTo({
					url: '/pages/nearbyCar/desInterest'
				})
				setImmediate(()=>{//解决ios触发地图点击事件
					this.showNearCar = false
					this.shownearShop = false
				})
				// if (e === 1) {
				// 	this.$refs.uNotify.show({
				// 		top: "50%",
				// 		type: 'warning',
				// 		color: '#fff',
				// 		bgColor: '#2CB9A4',
				// 		message: '已加入团洗会员价商户',
				// 		duration: 1000 * 4,
				// 		fontSize: 14,
				// 		safeAreaInsetTop: false
				// 	})
				// } else {
				// 	this.$refs.uNotify.show({
				// 		top: "50%",
				// 		type: 'warning',
				// 		color: '#fff',
				// 		bgColor: '#2CB9A4',
				// 		message: '支持用户已购卡券可使用的商户',
				// 		duration: 1000 * 4,
				// 		fontSize: 14,
				// 		safeAreaInsetTop: false
				// 	})
				// }
			},
			goSweep() {
				uni.scanCode({
					success: (res) => {
						console.log('条码内容：' + res);
						if (res.path) {
							uni.navigateTo({
								url: `/${res.path}`
							})
						} else {
							setTimeout(() => {
								uni.showToast({
									duration: 1500,
									icon: 'none',
									title: '您的二维码无法识别!'
								})
							}, 1500)
						}
					},
					fail:() => {
						setTimeout(() => {
							uni.showToast({
								duration: 1500,
								icon: 'none',
								title: '您的二维码无法识别!'
							})
						}, 1500)
					}
				});
				// uni.navigateTo({
				// 	url:'/my_pages/codeSweepWash/codeSweepWash'
				// })
			},
			clearType() {
				this.selectBtn = ''
			},
			goNotice() {
				uni.navigateTo({
					url: '/pages/nearbyCar/noticeList/noticeList'
				})
			},
			closeNotice() {
				this.showTips = false;
			},
			randomRgb(item) {
				let colorList = ['#1F63E1', '#09BB07', '#FF954E', '#7C7EE3', '#086a97', '#41971d', '#979209',
					'#134c97', '#69972d', '#0b9774', '#099782'
				]
				let index = Math.floor(Math.random() * colorList.length)
				return colorList[index]
			},
			// 加载更多
			loadMore() {
				if (this.nearParams.page < this.nearPage) {
					this.nearParams.page++;
					this.getTodaySell();
				}
			},
			// 附近洗车点
			async getTodaySell() {
				let obj = this.centerData;
				this.nearParams.lon = obj[0].longitude;
				this.nearParams.lat = obj[0].latitude;

				let res = await nearby(this.nearParams);
				let list = res.data.data;
				this.nearShopList = this.nearParams.page == 1 ? res.data.data : this.nearShopList.concat(res.data.data);
				console.log(this.nearShopList,'左数据  nearShopList  右参数',this.nearParams)
				this.nearPage = res.data.last_page
				this.shownearShop = true
			},
			regionchange(e) {
				if (e.type == 'end') {
					// this.longitude = e.mp.detail.centerLocation.longitude;
					// this.latitude = e.mp.detail.centerLocation.latitude
				}
			},
			equityChange(val) {
				this.form.equity = val ? 1 : 0
				if (val) {
					this.usable = !val
					this.form.usable = this.usable ? 1 : 0
				}
				this.vicinity()
				this.nearParams.equity = this.form.equity
				this.nearParams.usable = this.form.usable
				this.nearParams.card_type_id = this.form.card_type_id
				this.nearParams.page = 1
				this.getTodaySell()
			},
			usableChange(val) {
				this.form.usable = val ? 1 : 0
				if (val) {
					this.equity = !val
					this.form.equity = this.equity ? 1 : 0
				}
				this.vicinity()
				this.nearParams.equity = this.form.equity
				this.nearParams.usable = this.form.usable
				this.nearParams.card_type_id = this.form.card_type_id
				this.nearParams.page = 1
				this.getTodaySell()
			},
			useCard(i) {
				let data = {
					id: i.id,
					// type:this.form.type_data,//当为卡卷的时候类型可不传
					score: 2,
					log: i.log
				}
				uni.navigateTo({
					url: '/pages/index/showCode/showCode?form=' + JSON.stringify(data)
				})
			},
			getMoreList() {
				if (this.form.page < this.last_page) {
					this.form.page = this.form.page + 1
					this.getCouponsList()
				}
			},
			upDateCheck(e) {
				this.listData = e
			},
			subNearCar() {
			},
			async getCouponsList() {
				this.listData = []
				let res = await usableCoupons({
					id: this.merchanData.id
				})
				this.listData = this.listData.concat(res.data.data)
				this.last_page = res.data.last_page
				this.showBottom = true;
			},
			callouttap(e) {
			},
			clickVicinity(e) {
			},
			clickTab(item, index) {
				if (this.selectBtn === index) {
					this.selectBtn = ''
					this.form.card_type_id = ''
				} else {
					this.selectBtn = index;
					this.form.card_type_id = item.id
				}
				this.vicinity()
				this.nearParams.equity = this.form.equity
				this.nearParams.usable = this.form.usable
				this.nearParams.card_type_id = this.form.card_type_id
				this.nearParams.page = 1
				this.getTodaySell()
			},
			async getCardType() {
				let res = await cardType();
				this.tabList = res.data;
				this.tabList.forEach(item => {
					item['bgColor'] = this.randomRgb()
				})
				this.vicinity()
			},
			async vicinity() {
				this.markers = []
				this.getAuthorizeInfo()
				let res = await vicinity(this.form)
				this.vicinityData = res.data
				for (let k = 0; k < this.vicinityData.length; k++) {
					if (this.vicinityData[k].goods.length >= 1) { //处理显示的元素
						let str = ''
						this.vicinityData[k].goods.map(item => {
							str += `${item.name.substring(0, 1)}`
						})
						let vicItem = this.vicinityData[k]
						vicItem['showVicItem'] = str
						this.customCalloutData.push(vicItem)
					}
				}
				this.formatData(); //处理获取的数据
			},
			formatData() {
				let arr = this.vicinityData.map((item, index, arr) => {
					return {
						id: item.id,
						iconPath: this.getUrl(item.goods, 'img').imgUrl,
						latitude: Number(item.lat),
						longitude: Number(item.lon),
						name: '',
						// joinCluster: true,
						width: item.goods.length == 1 ? 28 : item.goods.length == 0 ? 28 : 39,
						height: item.goods.length == 1 ? 32 : item.goods.length == 0 ? 32 : 43,
						// label: {//因为不兼容ios所以隐藏了,换成了customCallout
						// 	content: this.getUrl(item.goods, 'word').word,
						// 	x: '100',
						// 	y: '100',
						// 	anchorX: '-7',
						// 	anchorY: '-40',
						// 	color: '#fff',
						// 	fontSize: '15'
						// },
						// anchorX: Math.floor(Math.random() * 10),
						// anchorY: Math.floor(Math.random() * 10),
						customCallout: {
							display: 'ALWAYS',
							anchorX: item.goods.length > 1 ? '14' : '0',
							anchorY: item.goods.length > 1 ? '6' : '26'
						}
					}
				})
				this.nearData = arr
				this.markers = this.nearData
				if (this.vicinityData.length == 0 && this.form.usable == 1) {
					this.showQulityCar = true;
				}
				this.$forceUpdate()
			},
			getUrl(data, type) {
				let returnInfo = {
					word: '',
					imgUrl: '',
					callout: ''
				};
				switch (type) {
					case 'img':
						if (data.length > 1) {
							returnInfo.imgUrl = `${getApp().globalData.baseUrl}/wxStatic/map/cosMap.png`
						} else if (data.length == 0) {
							returnInfo.imgUrl =
								`${getApp().globalData.baseUrl}/wxStatic/map/map5.png`
						} else {
							returnInfo.imgUrl =
								`${getApp().globalData.baseUrl}/wxStatic/map/map6.png`
						}
						break;
					case 'word':
						if (data.length > 1) {
							returnInfo.word = ''
						} else if (data.length == 0) {
							return '团'
						} else {
							returnInfo.word = data[0].name.substring(0, 1); //取第一个字
						}
						break;
					case 'callout':
						if (data.length > 1) {
							let str = ''
							data.map(item => {
								str += `${item.name.substring(0, 1)} `
							})
							returnInfo.callout = str;
						} else if (data.length == 0) {
							return null
						} else {
							returnInfo.callout = ''; //取第一个字
						}
						break;
				}
				return returnInfo;
			},
			refuse(e) {
				this.showNearCar = false
				this.showBottom = false
				this.showQulityCar = false
				this.shownearShop = true;
			},
			subNearCar() {

			},
			getMerchant(e) {
				this.showNearCar = false
				this.listData = []
				this.getCouponsList()
			},
			// 点击标记点
			async makertap(e) {
				if (this.clickShopPop ||this.interType) {
					this.interType = false;
					return;
				}
				var id = e.detail.markerId;
				let obj = this.centerData;
				let form = {
					id,
					lon: obj[0].longitude,
					lat: obj[0].latitude
				}
				this.merchanData = form
				let res = await merchantSee(form)
				this.nearCarData = res.data;
				this.isTrila = res.data.is_trila
				this.showNearCar = true;
				this.shownearShop = false;
			},
			openAuthSetting() {
				let that = this;
				uni.getSetting({
					success: (res) => {
						if (
							res.authSetting["scope.userLocation"] != undefined &&
							res.authSetting["scope.userLocation"] != true
						) {
							uni.showModal({
								title: "请求授权当前位置",
								content: "需要获取您的地理位置，请确认授权",
								success: function(res) {
									if (res.cancel) {
										uni.showToast({
											title: "拒绝授权",
											icon: "none"
										});
									} else if (res.confirm) {
										uni.openSetting({
											success: function(dataAu) {
												if (dataAu.authSetting[
														"scope.userLocation"
													] ==
													true) {
													uni.showToast({
														title: "授权成功",
														icon: "none"
													});
													//再次授权，调用wx.getLocation的API
													that.getAuthorizeInfo();
												} else {
													uni.showToast({
														title: "授权失败",
														icon: "none"
													});
												}
											},
										});
									}
								},
							});
						} else if (res.authSetting["scope.userLocation"] == undefined) {
							//调用wx.getLocation的API
							// console.log("首次授权");
							this.getAuthorizeInfo();
						} else { //强制获取位置
							//调用wx.getLocation的API
							this.getAuthorizeInfo();
						}
					},
				})
			},
			// 位置授权
			getAuthorizeInfo() {
				let self = this
				uni.authorize({
					scope: 'scope.userLocation',
					success() { // 允许授权
						uni.getLocation({
							success: function(res) {
								self.latitude = res.latitude;
								self.longitude = res.longitude;
								self.firstlat = res.latitude;
								self.firstlng = res.longitude;
								self.centerData = [self.WGS84ToGCJ(res.longitude, res.latitude)]
								self.getLocationInfo()
							},
						})
					},
					fail() { // 拒绝授权
						this.openAuthSetting();
						// console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			// 坐标转换
			WGS84ToGCJ(wgLon,wgLat){
			    var pi = 3.14159265358979324
			    var ee = 0.00669342162296594323
			    var a = 6378245.0
			
			    var dLat = this.transformLat(wgLon-105.0, wgLat-35.0)
			    var dLon = this.transformLon(wgLon-105.0, wgLat-35.0)
			    let radLat = wgLat / 180.0 * pi;
			    var magic = Math.sin(radLat);
			    magic = 1 - ee * magic * magic;
			    var sqrtMagic = Math.sqrt(magic);
			    dLat = (dLat * 180.0) / ((a * (1-ee)) / (magic * sqrtMagic) * pi);  
			    dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi); 
			    var mgLat = parseFloat(wgLat) + parseFloat(dLat);  
			    var mgLon = parseFloat(wgLon) + parseFloat(dLon); 
			    return {
					latitude: mgLat.toFixed(6),
					longitude: mgLon.toFixed(6),
				}
			},
			//转为纬度
			transformLat(x,y){
			    var pi = 3.14159265358979324;
			    var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));  
			    ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;  
			    ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;  
			    ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;  
			    return ret
			},
			//转换经度
			transformLon(x,y){
			    var pi = 3.14159265358979324;
			    var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));  
			    ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;  
			    ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;  
			    ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;  
			    return ret
			},
			// 获取地理位置
			getLocationInfo(val) {
				var that = this;
				this.amapObject = new amapFile.AMapWX({
					key: '0a7e3109fe2a9b39a5e2b854e164614f'
				})
				let location = ''
				if (val) {
					location = val
				} else {
					location = ''
				}
				this.amapObject.getRegeo({
					iconPath: "",
					location: location,
					success: (res) => {
						that.latitude = res[0].latitude;
						that.longitude = res[0].longitude;
						that.local = res[0].name
						that.markers = that.nearData
						that.getTodaySell()
						this.circles = [{
							latitude: res[0].latitude,
							longitude: res[0].longitude,
							fillColor: "rgba(255,42,65,0.8)",
							color: "#FF0000",
							radius: 50,
						}, ]
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			toLocation() {
				// 改变地图中心位置
				let obj = this.centerData;
				console.log(obj, this.latitude)
				this.latitude = obj[0].latitude
				this.longitude = obj[0].longitude
				mapCtx.moveToLocation({
					longitude: this.longitude,
					latitude: this.latitude,
					success: function() {
						console.log("成功将地图中心移到定位点")
					}
				})
				this.scale = 12
			},
			poitap(e) {
				console.log(e, "poitap")
				var obj = e.detail
				self.toLocation(obj)
				console.log(e.detail.name)
				this.local = e.detail.name
				console.log(this.latitude, this.longitude)
				this.latitude = e.detail.latitude
				this.longitude = e.detail.longitude
			},
			getAddress(points) {
			},
			goback() {
				let e = {
					local: this.local,
					latitude: this.latitude,
					longitude: this.longitude,
				}
				uni.$emit('map', e)
				uni.navigateBack()
			}
		}
	}
</script>
<style lang="scss">
	.scroll-list__goods-item {
		flex-shrink: 0;
	}

	.scroll-list__goods-item__text {
		color: #fff;
		text-align: center;
		font-size: 12px;
		margin-top: 5px;
		display: inline-block;
		min-width: 200px;
	}

	.scroll-list {
		@include flex(column);

		&__goods-item {
			margin-left: 40rpx;

			&__image {
				width: 60px;
				height: 60px;
				border-radius: 4px;
			}

			&__text {
				color: #f56c6c;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}

		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}
	}
</style>
<style>
	radio .wx-radio-input {
		border-radius: 50%;
		/* 圆角 */
		width: 40rpx;
		border: 1rpx solid #ccc;
		height: 40rpx;
	}

	radio .wx-radio-input.wx-radio-input-checked {
		border: none;
		background: #2CB9A4;
	}

	radio .wx-radio-input.wx-radio-input-checked::before {
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 40rpx;
		color: #fff;
		background: #2CB9A4;
		/* transform: translate(-50%, -50%) scale(1); */
	}

	.u-scroll-list {
		padding-top: 10px;
	}

	.customCallout {
		box-sizing: border-box;
		border-radius: 30px;
		display: inline-flex;
		padding: 5px 20px;
		justify-content: center;
		align-items: center;
	}

	.content {
		margin: 0 10px;
		font-size: 14px;
	}

	.send {
		position: relative;
		width: 150px;
		height: 35px;
		background: #F8C301;
		border-radius: 5px;
		margin: 30px auto 0;
	}

	.arrow {
		bottom: 1px;
		position: relative;
		left: 14px;
		width: 0;
		height: 0;
		font-size: 0;
		border: solid 14px;
		border-color: #fff #cda9a000 #5c2f2400 #f8c30100;
		z-index: 1;
	}

	page {
		overflow: hidden;
	}
</style>

<style lang="scss" scoped>
	::v-deep .u-scroll-list {
		background: #fff;
	}

	.popup-mask {
		position: fixed;
		box-sizing: border-box;
		width: 100vw;
		top: 0px;
		left: 0;
		right: 0;
		z-index: 100;
		height: 100vh;
		background-color: rgba(0, 0, 0, .75);
	}

	::v-deep .u-popup__content__close {
		z-index: 10076 !important;
	}

	::v-deep .u-transition {
	}

	::v-deep .u-scroll-list__scroll-view,
	::v-deep .u-scroll-list__indicator {
		overflow: auto;
	}

	.item_btn {
		color: #fff;
		border-radius: 10rpx;
		padding: 6rpx 20rpx;
		display: inline-block;
		font-size: 26rpx;
		line-height: 40rpx;
		height: 40rpx;
		background-color: #2CB9A4;
	}

	.item_btn1 {
		color: #979797;
		border-radius: 10rpx;
		padding: 6rpx 20rpx;
		display: block;
		font-size: 26rpx;
		display: flex;
		justify-content: center;
		height: 52rpx;
		background-color: #fff;
		border: 1rpx solid #979797;
		box-sizing: border-box;
	}

	::v-deep .nearShop .u-transition {
		z-index: 9 !important;
	}

	::v-deep .nearShop .u-safe-bottom {
		padding-bottom: 0px !important;
	}

	#near {

		.tips {
			display: flex;
			align-items: center;
			background: #2CB9A4;
			left: 27rpx;
			color: #fff;
			padding: 15rpx 20rpx;
			border-radius: 10rpx;
			width: 88%;
			position: fixed;
			top: 134rpx;
			z-index: 1;
			font-size: 26rpx;
			justify-content: space-between;

			.closeTips {
				height: 100%;
				width: 40px;
				display: flex;
				justify-content: flex-end;
			}
		}

		.iconNow {
			display: flex;
			position: fixed;
			bottom: 492rpx;
			right: 40rpx;
			z-index: 1;
			flex-direction: column;

			.top {
				image {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.bot {
				image {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}

		.singleItem {
			color: #fff;
		}

		.vicinityInfo {
			position: relative;
			background: #fff;
			display: flex;
			align-items: center;
			border-radius: 20px;
			padding: 12rpx 24rpx;

			.item {
				margin: 4rpx 10rpx;
				color: #fff;
				border-radius: 50%;
				width: 22px;
				height: 22px;
				line-height: 22px;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
			}
		}

		.equity {
			padding: 20rpx;
			position: fixed;
			left: 30rpx;
			z-index: 1;
			box-sizing: border-box;
			display: flex;
			align-items: flex-end;
			bottom: 323rpx;
			width: calc(100% - 60rpx);
			display: flex;
			background: #fff;
			justify-content: space-around;
			align-items: center;
			border-radius: 20rpx;
			flex-direction: row-reverse;

			&_free {
				font-size: 26rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				background: #fff;
				padding: 13rpx;
				color: #2CB9A4;
				border-radius: 20rpx;
				padding: 20rpx 0;
				border: 0.5px solid #2CB9A4;
				width: 46%;
				justify-content: center;
			}

			&_commercial {
				box-shadow: 0px 0px 5px 0px #BABABA33;
				padding: 20rpx 40rpx;
				font-size: 26rpx;
				padding: 20rpx 0;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				background: #fff;
				color: #979797;
				border-radius: 20rpx;
				width: 46%;
				justify-content: center;
			}

			&_switch {
				margin-right: 10rpx;
			}
		}
	}

	::v-deep .jc-e .u-icon__icon {
		color: #fff !important;
	}

	.topInfo {
		height: 50px;
		display: flex;
		padding-left: 20rpx;
		font-size: 28rpx;
		background: #fff;
		flex-wrap: wrap;
		padding: 10rpx 20rpx;

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 20rpx;
			margin-bottom: 10rpx;

			.leftIcon {
				margin-right: 6rpx;
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
			}

			.item_btn {
				color: #fff;
				border-radius: 8rpx;
				padding: 4rpx 16rpx;
				font-size: 26rpx;
			}
		}
	}

	.map_container {
		width: 100%;
		overflow: hidden;
		top: 0;
		bottom: 80px;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: calc(100vh - 30px);
		z-index: 0;
		position: relative;

		.search {
			width: 90%;
			padding-bottom: 15rpx;
		}

		.map {
			height: auto;
			width: 100%;
		}
	}

	.location {
		width: 95%;
		height: auto;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0px;
		background: #fff;
		padding: 2.5%;
		overflow: hidden;

		.distance {
			color: #4295FA;
			font-size: 12px;
		}
	}
</style>